// 条件渲染和循环渲染
import CommonList from "./CommonList";

//  ?: && ||
let flag = false;
const list = [
    'aaa', 'bbb', 'ccc'
]
const data = [
    { id: 1, title: 'aa', imgurl: 'xxx' },
    { id: 2, title: 'bb', imgurl: 'xxx' },
    { id: 3, title: 'cc', imgurl: 'xxx' },
]
// 数组的map方法: 基于原数组，返回一个等长的新数组 
const newList = list.map(item => {
    return item + 'xyz'
})
// console.log(newList);

const NavList = () => {
    return (
        <div>
            <h2>循环渲染: map</h2>
            <CommonList list={[1,2,3,4,5]} />
            <CommonList list={[100,200,300]} />
            <CommonList list={['aaa','bbb','ccc']} />
            <ul>
                {
                    data.map(item => {
                        return (
                            <li key={item.id}>
                                <img src={item.imgurl} alt="" />
                                <a href="">{item.title}</a>
                            </li>
                        )
                    })
                }
            </ul>
            <h2>条件渲染：?:  &&</h2>
            {flag ? 'hello' : 'world'}
            {flag && 'hello'}
            {/* {
            [
                <li>aaa</li>,
                <li>bbb</li>,
                <li>ccc</li>
            ]
        } */}
        </div>
    )
}

export default NavList